<div role="daterange" {{{propertystr}}}>
    <str-text 
        id="startdate_1"
        readonly
        hiddenbottom
        {{if required}} required {{/if}}
        {{if disabled}} disabled {{/if}}
        label="{{startlabel}}"
        value="{{startvalue}}"
        {{if form}} form="{{form}}" {{/if}}
        rendertype="{{rendertype}}"
        name="{{startname}}"
        placeholder="{{startplaceholder}}"
        {{if startleadicon}} leadicon="{{startleadicon}}" {{/if}}
        {{if starttrailicon}} trailicon="{{starttrailicon}}" {{/if}}
        {{if assistivetype}} assistivetype="{{assistivetype}}" {{/if}}
        {{if assistivetext}} assistivetext="{{assistivetext}}" {{/if}}
        size="{{size}}"></str-text>
    <str-text 
        id="enddate_1"
        readonly
        hiddenbottom
        {{if required}} required {{/if}}
        {{if disabled}} disabled {{/if}}
        label="{{endlabel}}"
        value="{{endvalue}}"
        {{if form}} form="{{form}}" {{/if}}
        rendertype="{{rendertype}}"
        name="{{endname}}"
        placeholder="{{endplaceholder}}"
        {{if endleadicon}} leadicon="{{endleadicon}}" {{/if}}
        {{if endtrailicon}} trailicon="{{endtrailicon}}" {{/if}}
        {{if assistivetype}} assistivetype="{{assistivetype}}" {{/if}}
        {{if assistivetext}} assistivetext="{{assistivetext}}" {{/if}}
        size="{{size}}"></str-text>
    <div class="str-date-area-help-container {{hiddenbottom}}">
        {{if assistivetype}}<div class="addtion-{{assistivetype}}">{{assistivetext}}</div>{{/if}}
    </div>
</div>